<template>
  <div class="page-promote-view" :class="`temp${data.flooring_page}`" v-if="hide == 0">
    <temp167 :data="data" :protocol="protocol"></temp167>

    <!-- <component v-if="data.status === 1" v-bind:is="componentFile" :data="data.data" :protocol="protocol"></component>
    <div v-else-if="data.status !== undefined && data.status !== 1" class="error">
      <img :src="require('@/assets/images/v1.0.0/pic_default_fail.png')" alt="err">
      <p>{{data.msg}}</p>
      <p class="m-href">
        <a href="javascript:window.location.reload();">立即刷新</a>
      </p>
    </div> -->
  </div>
</template>

<script>
  /*global $ returnCitySN require ClipboardJS wx err process*/
  import {saveCookie, getCookie, removeCookie} from "../../service/util.service";

  import temp167 from './temp167'

  export default {
    components: {
      temp167,
    },
    data() {
      return {
        data: {},
        protocol: {show: true, content: '', title: '用户隐私协议'},
        componentFile: undefined,
        url:'',
        hide: 1,
      }
    },
    methods: {
      render(path) {

        let component = import(`./${path}`);
        component.then(res => {
        }).catch(err => {
          this.$store.dispatch('dingtalk', {
            tag: '渲染模板异常:',
            content: err.toString(),
          });
        });
        this.componentFile = (resolve) => ({
          component: component,
          loading: {template: '<div></div>'},
          error: {template: '<div style=" width: 100%;height: 100vh;overflow: hidden;background: #fff;text-align: center;font-size: 1rem;"><p class="info" style=" display: block;margin-top: 20vh;font-size: 1.6rem;color:#212121;">当前网络状态不稳定 请稍后...</p><div style=" margin-top: 10vh;font-size: 1rem;display: flex;justify-content: center;"><a href="javascript:window.location.reload();">刷新重试</a><a href="/" style="margin-left: 30px;">返回首页</a></div></div>'},
          delay: 0,
          timeout: 10000
        })
      },
      getProtocol() {
      },
      getData() {
        var data = {
          status: 1,
          data:{
            ios_url:"javascript:;",
            android_url:"javascript:;"
          }
        }
        data.data.download_page = 17;
        data.data.flooring_page = 167

        this.$http
          .post(`/landing/landing`, {
            guide: this.$route.query.id,
          })
          .then(({ data }) => {
          })
          .catch((err) => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络状态不稳定.......！", "middle");
        });
        

        this.$set(this, 'data', data.data);
        if (data.code === 200) {
          
          data.data.project_name = '懂钱弟'
          window.document.title = '懂钱弟';

          this.$store.dispatch('setApp', {
            'project_name': data.data.project_name
          });

          // this.url = (this.$router.UA().ios ? data.data.ios_url : data.data.android_url);
          // sessionStorage.setItem('download_url', this.url)

        }
        this.hide = 0;
      },
      
    },
    mounted(){},
    created() {
      let user = getCookie('user') && JSON.parse(getCookie('user')) || {}
      user.guide = (this.$route.query.id || this.$route.query.id) ? (this.$route.query.id || this.$route.query.id) : user.guide;
      this.$store.state.auth.user = user
      this.$store.state.auth.guide = user.guide
      removeCookie('base_version')
      saveCookie('guide', user.guide)

      this.getData();
    },
  }
</script>

<style lang="scss">
  .page-promote-view {
    position: relative;

    img {
      max-width: 100%;
    }

    .container {
      min-height: 100vh;
    }

    footer {
      text-align: center;
      font-size: .9rem;
    }

    .error {
      text-align: center;
      font-size: 1rem;
      padding-top: 15vh;

      > img {
        margin: 0 auto;
        width: 180px;
      }

      .m-href {
        padding: 20px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      a {
        padding: 10px;
        display: block;
      }
    }

    //公用loading
    .loading {
      padding-top: calc(30vh - 30px);
      color: #999;
      font-size: .85rem;
      text-align: center;

      img {
        width: 60px;
        height: 60px;
        margin-top: 25px;
        animation: rotate 1.5s linear infinite;
      }
    }

    @keyframes rotate {

      0% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(90deg);
      }

      50% {
        transform: rotate(180deg);
      }

      75% {
        transform: rotate(270deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @-webkit-keyframes rotate {

      0% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(90deg);
      }

      50% {
        transform: rotate(180deg);
      }

      75% {
        transform: rotate(270deg);
      }

      100% {
        transform: rotate(360deg);
      }

    }
    // 公用协议
    .page-agree-content {
      background-color: #fff;
      min-height: 100vh;
      font-size: .9rem;
      padding: 3.75vw 3.75vw 60px;

      > .title {
        text-align: center;
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 30px;
      }

      > .content {
        img {
          max-width: 100%;
          margin: 0 auto;
          display: inline-block;
        }
      }

      .btn-close-agree {
        position: fixed;
        z-index: 510;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 40px;
        transform: translate3d(0, 0, 0);

        > img {
          width: 100%;
        }

        &:active {
          opacity: .8;
        }
      }
    }
  }
</style>
